<template>
	<view class="search_box">
		<view class="search_top across" :style="{marginTop:statusBar + 'px'}">
			<view class="left">
				<image class='back' @click="navBack" src='../../../static/images/back.png'></image>
				<view class="search_top_center across">
						<image  src='../../../static/images/icon-search.png'></image>
					<input type="text" :value="keyword" @input='setKeyword' placeholder="请输入搜索内容" />
				</view>
				<view class="search_btn" @click="btnSearch">搜索</view>
			</view>
		</view>
		<view class="search_history" v-if="isShowHistory">
			<view class="history_item across" v-for="(item,index) in list">
				<view class="across"  @click="setvaluekeyword(index)">
					<image src='../../../static/images/img/history-item.png'></image>
					<view>{{item}}</view>
				</view>
				<image src="../../../static/images/img/close.png" class='closeBtn' @click="deleteHisList(index)"></image>
			</view>
		</view>
		<view class="love"  v-if="isShowHistory">
			<view class="love_top across">
				<view>猜你想搜</view>
				<view class='refresh_box across' @click="initRecond">
					<image class='refresh_img' src='../../../static/images/img/shua.png'></image>
					<view>换一换</view>
				</view>
			</view>
			<view class="love_center">
				<view class="love_center-item" @click="setDiscord(index)" v-for="(item,index) in discover">
					{{item.shop_name}}
				</view>
			</view>
		</view>
		<view class="rank_box"  v-if="isShowHistory">
			<view class="rank_title">
				<view class="label">品牌热榜</view>
				<view class="rank_class">
					<view @click="setClassAct(index)" :class="actClassIndex == index ?'act_class rank_class-item': 'rank_class-item'" v-for="(item,index) in classify">
						{{item.cate_name}}
					</view>
				</view>
			</view>
			<view class="rank_list">
				<view class="rank_item" @click="navShopDetail(item.id)" v-for="(item,index) in rank_list">
					<view class="left">
						<view :class="index<3?'min act_item':'min'">{{index+1}}</view>
						<avatar :size='25' :img='item.logo'></avatar>
						<view class="name">{{item.shop_name}}</view>
					</view>
					<view class="right">
						<image src="../../../static/images/icon_fire.png"></image>
						<view>{{item.coll_num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info_list" v-if="info_list.length>0">
			<view class="info_item" v-for="(item,index) in info_list">
				<view class="across info_item-title">
					<view class="title_left" @click="navShop(item.shop_id)">
						<avatar :img="item.shop_logo" :size="30"></avatar>
						<view class="shop_name">{{item.shopinfo_shop_name}}</view>
						<view class="time">  · {{item.create_time}}</view>
					</view>
		<!-- 			<view class='more_btn' @click='openplanit(index)'>
							<image src="../../../static/images/img/more.png" mode=""></image>
						</view> -->
				</view>
				<view class="content">	
					<view class="desc" >{{item.describe}}</view>
					<view class="videoBox" v-html="videoHtml(item.video_url)" style="width: 500upx;height: 750upx;border-radius: 15upx;" @click="navPlayer(item.shop_id,index)"></view>
					<view style="display: flex;align-items: center;padding-left: 40upx;padding-top: 15upx;">
						<view style="opacity: 0.9;display: flex;align-items: center;">
							<image src="@/static/chakan.png"
								style="width: 24px; height: 18px;"></image>
							<text style="color: #FFFFFF; font-size: 14px; text-align: center;font-weight: bold;padding-left: 10upx;">{{item.access_num}}</text>
						</view>
						<view @click.stop="handleForward(index)" style="opacity: 0.9;display: flex;align-items: center;margin-left: 30upx;">
							<image src="@/static/img/index/share-fill.png"
								style="width: 30px; height: 30px;"></image>
							<text
								style="color: #FFFFFF;font-size: 14px; text-align: center; font-weight: bold;padding-left: 10upx;">分享</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="none_box" v-if='isShowNone'>
			没有找到搜索信息!
		</view>
		<complanit ref="complanit" :cid="currentId"></complanit>
	
	</view>
</template>

<script>
	import avatar from '../../../components/avatar.vue'
	import complanit from '../../../components/complaint.vue'
	
	export default {
		data() {
			return {
				list: [
				],
				discover:[],
				statusBar:0,
				customBar:0,
				keyword: '',
				page:1,
				info_list:[],
				currentId: '',
				isShowNone:false,
				isShowHistory: true,
				isShowd:true,
				classify:[],
				actClassIndex: 0,
				rank_list:[],
				myinfo:{}
			}
		},
		onLoad() {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					this.myinfo = JSON.parse(value)
				} else {
					// alert(222)
				}
			} catch (e) {
				// error
			}
			console.log(this.myinfo,"sdasdas")
			this.classify = this.$store.getters.getClassify
			this.location = this.$store.getters.getLocation
			if(!this.classify.find(item=>{
				return item.cate_name == '全部'
			})){
				this.classify.unshift({
					cate_name: '全部',
					pid:0
				})
			}
			this.initRank()
			this.initRecond()
		},
		components:{
			avatar,
			complanit,
		},
		computed:{
			videoHtml(){
				return function(i){
					let newText = `<video src="" class="videoBox1" webkit-playsinline="true" x5-video-player-type="h5" x5-video-orientation="portraint" :controls="false" class="videod" 
					style="width: 250px;height: 375px;border-radius: 10px;"poster="${i}?x-oss-process=video/snapshot,t_0,f_jpg">
							<cover-image src="../../../static/images/paly.png" style="width: 100rpx;height: 100rpx;"></cover-image>
						</video>`;
					return newText
				}
			}
		},
		mounted(){
			uni.getSystemInfo({
			    success: e=> {
			      // this.compareVersion(e.SDKVersion, '2.5.0')
			      let statusBar = 0
			      let customBar = 0
			      
			      
			      // #ifdef MP
			      statusBar = e.statusBarHeight
			      customBar = e.statusBarHeight + 45
			      if (e.platform === 'android') {
			        this.$store.commit('SET_SYSTEM_IOSANDROID', false)
			        customBar = e.statusBarHeight + 50
			      }
			      // #endif
			      
			      
			      // #ifdef MP-WEIXIN
			      statusBar = e.statusBarHeight
			      // @ts-ignore
			      const custom = wx.getMenuButtonBoundingClientRect()
			      customBar = custom.bottom + custom.top - e.statusBarHeight
			      // #endif
			
			
			      // #ifdef MP-ALIPAY
			      statusBar = e.statusBarHeight
			      customBar = e.statusBarHeight + e.titleBarHeight
			      // #endif
			
			
			      // #ifdef APP-PLUS
			      console.log('app-plus', e)
			      statusBar = e.statusBarHeight
			      customBar = e.statusBarHeight + 45
			      // #endif
			
			
			      // #ifdef H5
			      statusBar = 0
			      customBar = e.statusBarHeight + 45
			      // #endif
				  
				console.log(statusBar)
				this.statusBar = statusBar
				this.customBar = customBar
				// this.customTop = statusBar + customBar
				console.log(customBar)
				// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
			      // this.$store.commit('SET_STATUS_BAR', statusBar)
			      // this.$store.commit('SET_CUSTOM_BAR', customBar)
			      // this.$store.commit('SET_SYSTEM_INFO', e)
			    }
			})
			uni.getStorage({
				key:'search_list',
				success:res=>{
					console.log(res,"获取到了吗")
					this.list = res.data
				}
			})
		
			console.log(this.$store.getters.getClassify)
		},
		methods: {
			navPlayer(id,index){
				console.log("我被触发了",id,index,shipin)
				var shipin = JSON.stringify(this.info_list)
				var useid = this.myinfo.id
				uni.navigateTo({
					url: '/pagesC/home/shopPlyer/shopPlyer?shpo_id=' + id + '&index=' + index + '&page=' + 1 + '&shipin=' + shipin+ '&useid=' + useid 
				})
			},
			handleForward(index) {
				console.log("分享", `${this.info_list[index].title}`, this.info_list[index])
				uni.share({
					type: 0,
					title: `${this.info_list[index].title}`,
					summary: `${this.info_list[index].shopinfo_shop_name}`,
					provider: 'weixin',
					scene: 'WXSceneSession',
					href: `${this.info_list[index].video_url}`, //分享的标准格式为 "https://xxx.xxx.com/h5/#/...'
					imageUrl: this.info_list[index].cover_img,
					success: () => {
						this.http('api/Alive/shareOk').then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: "分享失败",
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			setClassAct(index){
				if(this.actClassIndex!=index){
					this.actClassIndex = index
					this.rank_list  = []
					this.initRank()
				}
			},
			initRecond(){
				this.$http.get_ranshops().then(res=>{
					this.discover = res.data
				})
			},
			initRank(){
				this.$http.shop_ranking({
					lon:this.location.longitude,
					lat: this.location.latitude,
					class_id: this.classify[this.actClassIndex].id,
					page: 1
				}).then(res=>{
					console.log(res)
					this.rank_list = this.rank_list.concat(res.data)
				})
			},
			navShopDetail(id){
				uni.navigateTo({
					url: '../personage/personage?userId=' +id
				})
			},
			setKeyword(e){
				console.log(e)
				this.keyword = e.detail.value
				console.log('觸發')
				
			},
			deleteHisList(index){
				this.list.splice(index,1); 
				if(this.list.length == 0){
					// this.isShowHistory = false
					// this.isShowd = false
				}
			},
			navShop(index){
				console.log(123,index)
				// uni.navigateTo({
				// 	url:`../home/personage/personage?userId=${this.list[index].shop_id}`
				// })
				uni.navigateTo({
					url:`/pagesC/home/personage/personage?userId=${index}`
				})
			},
			setDiscord(index){
				this.keyword = this.discover[index].shop_name
				this.btnSearch()
				// uni.showLoading({
				// 	title:'请求中'
				// })
			},
			setvaluekeyword(index){
				this.keyword = this.list[index]
				this.btnSearch()
				// uni.showLoading({
				// 	title:'请求中'
				// })
			},
			btnSearch(){
				this.isShowHistory = false
				if(page == 1){
					this.info_list  = []
				}
				let keyword = this.keyword
				let page = this.page
				if(keyword != '' && this.list.indexOf(keyword) == -1){
					this.list.push(keyword)
					if(this.list.length >=6){
						this.shift()
					}
				}
				uni.request({
				    url: 'https://dsx.cdzer.com/api/Video/getVideoList', //仅为示例，并非真实接口地址。
				    data: {
							keyword,
							page
				    },
					method:'POST',	
					header: { 'content-type': 'application/x-www-form-urlencoded', },
				    success: (res) => {
				       	this.info_list = res.data.data.video_list
				       	if(page == 1 & this.info_list.length == 0){
				       		this.isShowNone = true
				       	}else{
				       		this.isShowNone = false
				       	}
				       	uni.setStorage({
				       		key: 'search_list',
				       		data:this.list
				       	})
				    }
				});	
				// this.$http.getVideoList({
				// 	keyword,
				// 	page
				// }).then(res=>{
				// 	this.info_list = this.info_list.concat(res.data.video_list)
				// 	if(page == 1 & this.info_list.length == 0){
				// 		this.isShowNone = true
				// 	}else{
				// 		this.isShowNone = false
				// 	}
				// 	uni.setStorage({
				// 		key: 'search_list',
				// 		data:this.list
				// 	})
				// })
			},
			openplanit(index){
				  this.currentId = this.info_list[index].id
				  this.$refs.complanit.open()
			},
			navBack(){
				uni.setStorage({
					key: 'search_list',
					data:this.list
				})
				uni.navigateBack({
					delta:1
				})
			}
		},
		onHide() {
			uni.setStorage({
				key: 'search_list',
				data:this.list
			})
		}
	}
</script>

<style lang="less">
	
	video {
		height: 400upx;
		border-radius: 20upx;
	}
	uni-input{
		width: 600upx!important;
	}
	.search_box{
		height: 100vh;
		width: 100vw;
		overflow: scroll;
		background: #000;
	}
	.across{
		display: flex;
	}
	.vertical{
		display: flex;
		flex-direction: column;
	}
	.none_box{
		width: 100vw;
		height: 30vh;
		line-height: 30vh;
		text-align: center;
		color: #fff;
		font-size: 40rpx;
	}
	.more_btn{
		width: 74rpx;
		height: 74rpx;
		// background-color: #242730;
		border-radius: 10rpx;
		image{
			margin-left: 15rpx;
			margin-top: 33rpx;
			width: 44rpx;
			height: 8rpx;
		}
	}
	.search_top{
		width: 100%;
		z-index: 9;
		align-items: center;
		// width: 65vw;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 0rpx 4vw;
		position: fixed;
		background-color: #000000;
		.left{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 92vw;
		}
		.back{
			width: 48rpx;
			height: 48rpx;
			// margin-left: 10rpx;
		}
		.search_top_center{
			width: 500rpx;
			height: 60rpx;
			background-color: #4D4D4D;
			align-items: center;
			padding: 0 10rpx;
			border-radius: 10rpx;
			.back_box{
				flex: 1;
			}
			image{
					width: 32rpx;
					z-index: 10;
					height: 32rpx;
			}
			input{
				flex: 1;
				margin-left: 15rpx;
				color: #fff;
			}
		}
		.search_btn{
			font-size: 30rpx;
			color: #ffffff;
		}
	}
	.search_history{
		margin-top: 100rpx;
		width: 92vw;
		padding-bottom: 20rpx;
		margin-left: 4vw;
		border-bottom: 1px solid #333333;
		.history_item{
			justify-content: space-between;
			margin: 40rpx 0vw;
			align-items: center;
			.across{
				image{
					width: 34rpx;
					height: 34rpx;	
				}
				view{
					margin-left: 30rpx;
					color: #fff;
				}
			}
			.closeBtn{
				width: 18px;
				height: 18px;
			}	
		}
		
	}
	.love{
		.love_top{
			width: 94vw;
			margin: 20rpx 4vw;
			color: #fff;
			align-items: center;
			justify-content: space-between;
			.refresh_box{
				align-items: center;
				image{
					width: 32rpx;
					height: 29rpx;
				}
				view{
					margin-left: 15rpx;
					font-size: 30rpx;
					color: #fff;
				}
			}
		}
		.love_center{
			width: 94vw;
			margin: 20rpx 3vw;
			color: #fff;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.love_center-item{
				padding: 10rpx 5rpx;
				margin-right: 10vw;
				font-size: 30rpx;
			}
		}
	}
	.info_list{
		width: 94vw;
		margin: 150rpx 3vw 20rpx;
		height: calc(100vh - 176rpx);
		overflow-y: scroll;
		.info_item{
			padding-bottom: 20rpx;
			margin-top: 20rpx;
			border-bottom: 1px solid #999999;
			.videoBox{
				.videoBox1{
					width: 100%;
					height: 400upx;
					border-radius: 20upx;
				}
			}
		}
		.info_item-title{
			
			align-items: center;
			justify-content: space-between;
		}
		.title_left{
			display: flex;
			align-items: center;
		}
		.shop_name{
			margin-left: 20rpx;
			margin-right: 10rpx;
		}
		.shop_name,.time{
			font-size: 30rpx;
			color: #fff;
		}
		.desc{
			font-size: 30rpx;
			color: #ffffff;
			margin: 20rpx 0;
			line-height: 40rpx;
		}
		.content{
			padding-bottom: 30upx;
			image{
				border-radius: 15rpx;
				// overflow: hidden;
			}
		}
	}
	.rank_box{
		width: 94vw;
		margin-left: 3vw;
		.rank_title{
			color: #fff;
			// font-size: 30rpx;
			.label{
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.rank_class{
			display: flex;
			text-align: center;
			color: white;
			overflow-y: auto;
			display: flex;
			margin-top: 20rpx;
			.rank_class-item{
				display: inline;
				margin: 0 20rpx 0 0;
				font-size: 24rpx;
				flex-shrink: 0;
				line-height: 36rpx;
				// width: 80rpx;
				height: 50rpx;
				background-color: #242730;
				border-radius: 5rpx;
				color: #999999;
				padding: 8rpx 12rpx;
			}
			.act_class{
				color: #ffffff;
			}
		}
		.rank_list{
			color: #fff;
			.rank_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 0 20rpx;
				.left{
					display: flex;
					align-items: center;
					.name{
						font-size: 30rpx;
						color: #ffffff;
						margin-left: 15rpx;
					}
					.min{
						font-size: 30rpx;
						margin-right: 12rpx;
						width: 30px;
						text-align: center;
					}
					.act_item{
						color: #f9a116;
					}
				}
				.right{
					display: flex;
					align-items: center;
					image{
						width: 22rpx;
						height: 26rpx;
						margin-right: 15rpx;
					}
					view{
						color: #999999;
					}
				}
			}
		}
	}
		&::-webkit-scrollbar {display:none}
</style>
